<template>
  <cube-page type="scroll-nav-side" title="点餐">
    <div slot="content">
      <div class="view-wrapper">
        <cube-scroll-nav
          :side="true"
          :data="data"
          :current="current"
          @change="changeHandler"
          @sticky-change="stickyChangeHandler">
          <cube-scroll-nav-panel
            v-for="item in data"
            :key="item.name"
            :label="item.name"
            :title="item.name">
            <ul>
              <li v-for="food in item.foods" :key="food.name">
                <div>
                  <img :src="food.icon">
                </div>
                <div class="goods-info">
                  <h2>{{food.name}}</h2>
                  <p>月销量：100 好评: 30</p>
                  <span class="price">¥ {{ food.price }}</span>
                </div>
                <count :info="food"></count>
              </li>
            </ul>
          </cube-scroll-nav-panel>
        </cube-scroll-nav>
      </div>
      <cart></cart>
    </div>
  </cube-page>
</template>

<script type="text/ecmascript-6">
  import CubePage from '../components/common/cube-page.vue'
  import goodsData from '../../static/mock/goods.json'
  import Count from '../components/cart/Count.vue'
  import Cart from '../components/cart/Cart.vue'

  const goods = goodsData.goods

  export default {
    components: {
      CubePage,
      Count,
      Cart
    },
    data () {
      return {
        data: [],
        current: goods[3].name
      }
    },
    created () {
      this.$http.getGoodsList({
        data: '00'
      }).then(res => {
        this.data = res.goods
        this.current = res.goods[0].name
      })
    },
    methods: {
      changeHandler (label) {
        console.log('changed to:', label)
      },
      stickyChangeHandler (current) {
        console.log('sticky-change', current)
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .scroll-nav-side
    background-color: #fff
    .view-wrapper
      position: fixed
      top: 88px
      left: 0
      bottom: 0
      width: 100%
    .prepend-header
      width: 90%
      margin: 20px auto
      text-align: center
      font-size: 20px
      line-height: 1.6
      border-radius: 2px
      box-shadow: 0 0 4px rgba(0, 0, 0, .2)
    .cube-scroll-nav-main
      background-color: #efeff4
    .cube-sticky-fixed
      background-color: #efeff4
    .cube-scroll-nav-bar
      width: 120px
      background-color: transparent
    .cube-scroll-nav-bar-item
      padding: 15px
    .cube-scroll-nav-bar-item_active
      background-color: #fff
    .cube-scroll-nav-panels
      background-color: #fff
    .cube-scroll-nav-panel
      img
        width: 114px
        height: 114px
      ul
        overflow: hidden
        font-size: 28px
        line-height: 1.4
        color: #666
      li
        padding: 30px
        display: flex
        align-items: center
        justify-content: space-between
        .goods-info
          flex: 1
          margin-left: 20px
          h2
            color: #333
          p
            overflow: hidden
            white-space: nowrap
            text-overflow: ellipsis
            font-size: 24px
            color: #999
    .cube-scroll-nav-panel-title
      padding: 15px
      font-size: 16px
      background-color: #fff
</style>
